<template lang="html">
  <div class="content" v-loading="loading">
    <div class="table" style="page-break-after:always" v-for="(item1,index1) in orderArrays" :key="index1" >
        <div class="title">
            <div class="title_h">欣美高级定制内衣发货单</div>
            <div class="tr">
                <div class="td" style="width:150px">收货单位：</div>
                <div class="td" style="width:254px"></div>
                <div class="td" style="width:150px">发货日期：</div>
                <div class="td" style="width:100%; flex:2 1 0%">{{tableData.sendTime}}</div>
            </div>
        </div>
        <div class="t_head">
          <div class="th" style="width:150px">订单号</div>
          <div class="th" style="width:100px">顾客姓名</div>
          <div class="th" style="width:154px">店家名称</div>
          <div class="th" style="width:150px">产品名称</div>
          <div class="th" style="width:60px">尺码</div>
          <div class="th" style="width:80px">颜色</div>
          <div class="th" style="width:72px">数量</div>
          <div class="th" style="width:105px">蕾丝</div>
          <div class="th" style="width:80px">设计师</div>
          <div class="th" style="width:100%;flex:1">备注</div>
        </div>
        <div class="t_body">
            <div class="tr" v-for="item in item1">
                <div class="td" style="width:150px;display:flex;align-items:center;">{{item.orderSublistId}}</div>
                <div class="td" style="width:100px;padding-top:0;padding-bottom:0;display:flex;align-items:center;">{{item.userName}}</div>
                <div class="td" style="width:154px;padding-top:0;padding-bottom:0;display:flex;align-items:center;">{{item.branchStoreName}}</div>
                <div class="td" style="width:150px;padding-top:0;padding-bottom:0;display:flex;align-items:center;">{{item.commodityName}}</div>
                <div class="td" style="width:60px;padding-top:0;padding-bottom:0;display:flex;align-items:center;">{{item.size}}</div>
                <div class="td" style="width:80px;padding-top:0;padding-bottom:0;display:flex;align-items:center;">{{item.color}}</div>
                <div class="td" style="width:72px;padding-top:0;padding-bottom:0;display:flex;align-items:center;">{{item.commodityNum}}</div>
                <div class="td" style="width:105px;padding-top:0;padding-bottom:0;display:flex;align-items:center;">{{item.laceName}}</div>
                <div class="td" style="width:80px;padding-top:0;padding-bottom:0;display:flex;align-items:center;">{{item.designerName}}</div>
                <div class="td" style="width:100%;flex:1"></div>
            </div>

            <div class="tr">
                <div class="td" style="width:150px"></div>
                <div class="td" style="width:100%;flex:1;text-align:center">
                  <span style="margin-right:30px">合计： </span>{{orderNums[index1]}} 件
                </div>
            </div>
            <div class="tr">
                <div class="td" style="width:150px">备注</div>
                <div class="td" style="width:100%;flex:1"></div>
            </div>
            <div class="tr">
                <div class="td" style="width:150px">发货人：{{tableData.sendName}}</div>
                <div class="td" style="flex:1"></div>
                <div class="td" style="flex:1">会计：</div>
                <div class="td" style="flex:1"></div>
                <div class="td" style="flex:1">收货人：</div>
                <div class="td" style="flex:1"></div>
            </div>
        </div>


    </div>
  </div>

</template>

<script>
export default {
    data() {
        return {
            loading: false,
            tableData: {},
            orderArrays:{},//订单数组
            orderNums:{},//每个订单数组的订单数量,和订单数组一一对应
            sliceNum : 12,
        }
    },
    computed: {
        factoryId() {
            return this.$route.query.factoryId;
        },
        type() {
            return this.$route.query.type;
        },
        id() {
            return this.$route.query.id;
        },
        ids() {
            return this.$route.query.ids;
        },
    },
    mounted() {
        this.loadData(this.type);
    },
    methods: {
        //计算每页订单有多少数量
        numberCount(array){
            var orderNums = [];
            for(var i in array){
                var sum = 0;
                for(var j in array[i]){
                    sum=this.accAdd(array[i][j].commodityNum,sum)
                }
                orderNums.push(sum);
            }
            return orderNums;
        },
        //切割数组为多个数组
        arraySlice(array, sliceNum) {
            var newArray = [];
            let viod = 0;//数组初始量
            for (let i = 0; i < array.length; i++) {
                if (i % sliceNum == 0 && i != 0) {
                    newArray.push(array.slice(viod, i));
                    viod = i;
                }
                if (i + 1 == array.length) {
                    newArray.push(array.slice(viod, i + 1));
                }
            }
            return newArray;
        },
        accAdd(arg1,arg2){
            var r1,r2,m;
            try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0};
            try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0};
            m=Math.pow(10,Math.max(r1,r2));
            return (arg1*m+arg2*m)/m;
        },
        async loadData(n) {
            let res = null;
            n = Number(n);
            this.loading = true;
            switch (n) {
                case 1:
                    if (this.id) {
                        res = await this.$http.afterSalaReturnPrint({ id: this.id,factoryId:this.factoryId });
                    } else {
                        res = await this.$http.afterSalaReturnPrints({ ids: this.ids,factoryId:this.factoryId });
                    }
                    break;
                case 2:
                    if (this.id) {
                        res = await this.$http.afterSalaSendPrint({ id: this.id });
                    } else {
                        res = await this.$http.afterSalaSendPrints({ ids: this.ids });
                    }
                    break;
                case 3:
                    if (this.id) {
                        res = await this.$http.orderSendPrint({ orderSublistId: this.id });
                    } else {
                        res = await this.$http.orderSendPrints({ orderSublistIds: this.ids });
                    }
                    break;
                case 4:
                    if (this.id) {
                        res = await this.$http.orderReturnPrint({ orderSublistId: this.id });
                    } else {
                        res = await this.$http.orderReturnPrints({ orderSublistIds: this.ids });
                    }
                    break;

            }
            this.loading = false;
            if (res.data.code == 0) {
                this.tableData = res.data.data;
                var orders = this.tableData.orders;
                var orderArrays = this.arraySlice(orders,this.sliceNum);
                var orderNums = this.numberCount(orderArrays);
                this.orderArrays = orderArrays;
                this.orderNums = orderNums;
                setTimeout(() => {
                    window.print();
                }, 2000)
            }

        },

    }
}
</script>

<style lang="css"  scoped>
@page {
    size: auto;
    margin: 0mm;
}

.content {
    background: #fff;
    box-sizing: border-box;
    padding: 0px 130px;
    overflow: hidden;
}
.table {
    margin-top: 50px;
    margin-bottom:50px;
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    box-sizing: border-box;
    font-size: 16px;
}
.title {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    line-height: 60px;
}
.title .title_h {
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
}
.title .tr {
    font-size: 14px;
}
.t_head {
    display: flex;
    border-bottom: 1px solid #000;
    box-sizing: border-box;
    font-weight: 600;
}
.t_head .th {
    box-sizing: border-box;
    border-right: 1px solid #000;
    padding: 10px;
    flex: none;
}
.t_body {
    box-sizing: border-box;
}
.tr {
    box-sizing: border-box;
    display: flex;
    border-bottom: 1px solid #000;
}
.tr .td {
    border-right: 1px solid #000;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    line-height: 100%;
    white-space: normal;
    word-break: break-all;
    flex: none;
}
</style>
